<template>
  <div class="container">
  <el-steps space="100%" :active="steps" finish-status="success" style="margin:30px 0 0 300px">
    <el-step title="基础信息"></el-step>
    <el-step title="分类库位"></el-step>
  </el-steps>
  <div class="form" >
    <el-form :model="formData" :rules="rules" ref="form">
      <el-form-item label="货主编号" prop="code">
        <el-input :disabled="!!formData.code"   v-model="formData.code"/>
      </el-form-item>
      <el-form-item label="货主名称" prop="name">
        <el-input v-model="formData.name"   />
      </el-form-item>
      <el-form-item label="联系人"  prop="personName">
        <el-input  v-model="formData.personName" />
      </el-form-item>
      <el-form-item label="联系人电话"  prop="phone">
        <el-input  v-model="formData.phone"/>
      </el-form-item>
      <el-form-item label="联系人邮箱">
        <el-input  v-model="formData.email" />
      </el-form-item>
      <!--width!!  -->
      <el-form-item label="省/市/区"  prop="location">
          <el-cascader ref="location"  v-model="location" :options="locationList.exports" :props="{ expandTrigger: 'hover',label:'name',value: 'code',children:'areaList'}"
              @change="handleChangeLocation">
          </el-cascader>
      </el-form-item>
      <el-form-item style="flex-basis: 49%" label="详细地址">
        <el-input  v-model="formData.address"/>
      </el-form-item>
      <el-form-item class="remark" style="flex-basis:50%;" label="备注">
        <el-input  v-model="formData.remark"/>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button class="btn1">返回</el-button>
      <el-button class="btn2" @click="nextStep">下一步</el-button>
    </div>
  </div>
  </div>
</template>

<script>
import { detail, put } from '@/api/goods-owner'
import { add } from '@/api/warehouse'
export default {
  name: 'goods-owner-add',
  data () {
    return {
      steps: 0,
      nextPage: true,
      locationList: {},
      /** location==>> 省市区级联选择器绑定的变量,
        * 用来输出 formData.location的babel信息
        * province,area,city,的code信息
        *  */
      location: [],
      formData: {
        code: '', // 货主编号
        name: '', // 货主名称
        personName: '', // 联系人
        phone: '', // 联系电话
        email: '', // 邮箱
        location: '', // 省市区
        address: '', // 详细地址
        remark: '', // 备注
        province: '', // 省
        area: '', // 市
        city: '' // 区

      },
      rules: {
        code: [{ required: true, message: '必填' }],
        name: [{ required: true, message: '必填' }],
        personName: [{ required: true, message: '必填' }],
        phone: [{ required: true, message: '必填' }],
        location: [{ required: true, message: '必填' }]
      }
    }
  },
  created () {
    // console.log(window.webpackJsonp[0][1]['6cca'])
    window.webpackJsonp[0][1]['6cca'](this.locationList)// 获取省市区 本地数据
    if (this.$route.params.id) { // 如果是编辑,路由导航会有
      this.detail()
    }
  },
  methods: {
    async detail () {
      const { data: detailinfo } = await detail(this.$route.params.id)
      this.formData = detailinfo
      this.$refs.location.inputValue = detailinfo.location
    },
    handleChangeLocation (a) { //
      console.log(a);
      [this.formData.province, this.formData.area, this.formData.city] = a
      console.log(this.$refs.location)
      setTimeout(() => {
        this.formData.location = this.$refs.location.inputValue.replace(/\s*/g, '')
      })
    },
    async nextStep () {
      // console.log(this.$refs.form)
      try {
        await this.$refs.form.validate()
        if (this.$route.params.id) {
          await put(this.formData)
          this.steps++
          this.nextPage = false
        } else {
          await add(this.formData)
        }
      } catch (e) {
        console.log(e)
      }
    }
  }

}
</script>

<style lang="less" scoped>
.container{
    // height: 100%;
    background-color: #fff;
    box-shadow: 3px 3px  10px gray;
    border-radius: 10px;
    padding: 30px;
    /deep/.el-steps{
      .el-step__head.is-success{

          border-color: #C0C4CC;

        .el-step__icon.is-text{
          color: orange;
          border-color: orange;
        }
      }
        .el-step__title.is-success{
          color: orange;
        }
    }
    /deep/.el-form{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item{
        width: 23%;
        .el-input__inner{
          background-color: #f8f5f5;
        }
        .el-cascader{
          width:100%
        }
      }
      .remark{
        .el-input__inner{
          height:50px
        }
      }
    }
    .btn{
      padding-top: 20px;
      border-top: 1px solid #f5efee;;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button{
        width:170px;
        height: 40px;
        border-radius: 30px; ;
      }
      .btn{background-color: #fff}.btn1:hover{background-color:#ffb200;color: black;}
      .btn2{background-color: #ffb200}.btn2:hover{background-color: #e8890d;color: black}
    }

}
</style>
